:root {
  --normal-bg: #fff;
  --normal-border: var(--gray4);
  --normal-text: var(--gray12);

  --success-bg: hsl(143, 85%, 96%);
  --success-border: hsl(145, 92%, 91%);
  --success-text: hsl(140, 100%, 27%);

  --info-bg: hsl(208, 100%, 97%);
  --info-border: hsl(221, 91%, 91%);
  --info-text: hsl(210, 92%, 45%);

  --warning-bg: hsl(49, 100%, 97%);
  --warning-border: hsl(49, 91%, 91%);
  --warning-text: hsl(31, 92%, 45%);

  --error-bg: hsl(359, 100%, 97%);
  --error-border: hsl(359, 100%, 94%);
  --error-text: hsl(360, 100%, 45%);
}

.main {
  width: 90%;
  margin: auto;
  margin-top: 1rem;
  text-align: center;

  form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    width: max(40%, 250px);
    margin: 2rem auto;
  }

  input,
  select {
    padding: 0.5em;
    font-size: 1rem;
    width: 100%;
  }

  label {
    display: flex;
  }

  #message {
    min-width: 25ch;
  }

  [for='duration'] {
    align-items: center;
  }

  .toastContainer {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .toast {
    padding: 0.5em;
    border-radius: 0.25rem;
    box-shadow: 0 4px 10px 0 rgb(0 0 0 / 25%);
    display: flex;
    align-items: center;

    color: var(--normal-text);
    background-color: var(--normal-bg);
    border: 1px solid var(--normal-border);
  }

  .toast.success {
    color: var(--success-text);
    background-color: var(--success-bg);
    border: 1px solid var(--success-border);
  }

  .toast.error {
    color: var(--error-text);
    background-color: var(--error-bg);
    border: 1px solid var(--error-border);
  }

  .toast.warning {
    color: var(--warning-text);
    background-color: var(--warning-bg);
    border: 1px solid var(--warning-border);
  }

  .toast.info {
    color: var(--info-text);
    background-color: var(--info-bg);
    border: 1px solid var(--info-border);
  }

  .toast::before {
    min-width: 1rem;
    padding: 0.1em 0.5em;
    font-size: 0.85em;
    font-weight: bold;
  }

  .success::before {
    content: '\2713';
  }

  .error::before {
    content: '!';
  }

  .warning::before {
    content: '\26A0';
  }

  .info::before {
    content: '\24D8';
  }

  .remove {
    all: unset;
    margin-left: 1em;
    cursor: pointer;
  }

  .tcLeftTop {
    top: 1rem;
    left: 1rem;
    align-items: flex-start;
  }

  .tcLeftBottom {
    bottom: 1rem;
    left: 1rem;
    align-items: flex-start;
  }

  .tcRightTop {
    top: 1rem;
    right: 1rem;
    align-items: flex-end;
  }

  .tcRightBottom {
    right: 1rem;
    bottom: 1rem;
    align-items: flex-end;
  }

  .tcLeftTop .toast,
  .tcLeftBottom .toast {
    animation: appear-from-left 0.1s ease-in forwards;
  }

  .tcLeftTop .toast.fade-out-left,
  .tcLeftBottom .toast.fade-out-left {
    animation: fade-out-to-left 0.1s ease-in forwards;
  }

  @keyframes appear-from-left {
    0% {
      transform: translateX(-200%);
    }

    100% {
      transform: translateX(0);
    }
  }

  @keyframes fade-out-to-left {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-200%);
    }
  }

  .tcRightTop .toast,
  .tcRightBottom .toast {
    animation: appear-from-right 0.1s ease-in forwards;
  }

  .tcRightTop .toast.fade-out-right,
  .tcRightBottom .toast.fade-out-right {
    animation: fade-out-right 0.1s ease-in forwards;
  }

  @keyframes appear-from-right {
    0% {
      transform: translateX(200%);
    }

    100% {
      transform: translateX(0);
    }
  }

  @keyframes fade-out-right {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(200%);
    }
  }
}
